<template>
  <view class="container">
    <view class="list">
      <view 
        class="list-item" 
        v-for="(item, index) in exchangeList" 
        :key="index"
        @click="goToDetail(item)"
      >
        <view class="item-info">
          <view class="info-row">
            <text class="label">任务类型：</text>
            <text>{{ item.task }}</text>
          </view>
          <view class="info-row">
            <text class="label">截止时间：</text>
            <text>{{ item.endTime }}</text>
          </view>
          <view class="info-row">
            <text class="label">简介：</text>
            <text>{{ shortContent(item.content) }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const exchangeList = ref([
  {
    id: 1,
    task: '前端',
    endTime: '2025年3月1日',
    content: '开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序开发小程序',
  },
  // 更多数据...
])

const shortContent = (content) => {
  return content.length > 5 ? content.substring(0, 5) + '...' : content;
};

const goToDetail = (item) => {
  uni.navigateTo({
    url: `/pages/detail/detail?id=${item.id}`
  })
}

// onMounted(() => {
//   uni.request({
//     url: '', // 填写你的 API URL
//     method: 'GET',
//     success: (res) => {
//       if (res.statusCode === 200) {
//         exchangeList.value = res.data
//       }
//     }
//   })
// })
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #E6F2FA;
  min-height: 100vh;
}

.list-item {
  background-color: #fff;
  margin: 20rpx 0;
  padding: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.item-info {
  font-size: 28rpx;
}

.info-row {
  margin: 10rpx 0;
  display: flex;
  justify-content: space-between;
}

.label {
  color: #666;
  font-weight: bold;
  margin-right: 10rpx;
}

.text {
  color: #333;
}

.list {
  background-color: #E6F2FA;
}
</style>